button(class="btn btn-primary", style="width:4rem; height:0.48rem") 登录
button(class="btn btn-primary", style="width:1.3rem; height:0.48rem") 获取验证码
div
  my-field(data-for='f1')
    input(id='f1', type="text", maxlength="11", class="form-control", placeholder="请输入手机号")
  my-field(data-for='f2')
    input(id='f2', type="password", class="form-control", placeholder="请输入密码")

#loginapp

template#loginapp-tpl
 div.a-login-form
    my-field(data-for='f3mobile')
      input(id='f3mobile', type="text", value="15195772116", maxlength="11", class="form-control", placeholder="请输入手机号")
    my-field(ref='field-f3-code', data-for='f3')
      <div class="input-group">
        <input id="f3" type="text" maxlength="11" value="sdsd" class="form-control" placeholder="手机验证码" >
        <div class="input-group-append">
          <span id="f3sendcode" class="input-group-text text-color-gray ui-cus-pointer" style="padding-left: .12rem; padding-right: .12rem;">获取验证码</span>
        </div>
      </div>
    my-field(data-for='f3password')
      input(id='f3password', type="password", class="form-control", placeholder="请输入密码")


mixin nav-item(id, href, name)
 li.nav-item(role="presentation", class!=attributes.licls, style!=attributes.listyle)
  .nav-link(id=id, data-toggle="tab", class!=attributes.class, href=href,  role="tab" ) #{name}

ul.nav(id='myTab', class="nav-login", role="tablist")
  +nav-item('home-tab', '#home', '手机快捷登录')(licls="text-sz-500",
  listyle="width: 2.3rem;", class="ui-center active")
  +nav-item('profile-tab', '#profile', '账号密码登录')(licls="text-sz-500",
  listyle="width: 2.3rem;", class="ui-center")
div(style="width:4.6rem;")
  .ui-relative.nav-tab-lines
    #tabline.nav-tab-line(class="bg-color-primary", style="width: 2.3rem; left: 0;")

#myTabContent.tab-content
  #home.tab-pane.fade.show.active(role="tabpanel") 1
  #profile.tab-pane.fade(role="tabpanel") 2
  #contact.tab-pane.fade(role="tabpanel") 3

script.
  window.registerLoginAppTab = function() {
    $('#myTab').on('shown.bs.tab', '[data-toggle="tab"]', function (e) {
      var nav = $(e.target)
      var navOffsetTabLeft = nav.offset().left - nav.parent().parent().offset().left
      document.getElementById('tabline').style.left = navOffsetTabLeft + 'px'
    })
  }

ul.nav(id='ohTab', class="nav-login", role="tablist")
  .ui-flex.ui-justify-center(style="width:4.6rem;")
    +nav-item('contact-tab', '#contact', '注册账号')(licls="text-sz-500",
    listyle="width: 2.3rem;", class="ui-center active")
.ui-flex.ui-justify-center(style="width:4.6rem;")
  .ui-relative.nav-tab-lines(style="width:2.3rem;")
    .nav-tab-line(class="bg-color-primary", style="width: 2.3rem; left: 0;")


